<template>
	<view class="newsList">
		<!-- 新闻列表 -->
		<view class="newsListSearch">
			<u-search placeholder="请输入" v-model="title" @search="searchNews" @custom="searchNews"></u-search>
			<u-tabs :list="newsTabsList" @click="newsTabsClick"></u-tabs>
		</view>
		<view class="newsListDiv">
			<view class="newsListDivItem" v-for="(item,index) in newsList" :key="index" @click="goDetails(item)">
				<view class="newsListDivItemImg">
					<img :src="item.thumbUrl" alt="" />
					<view class="newsListDivItemType">
						{{item.type}}
					</view>
				</view>
				<view class="newsListDivItemDiv">
					<view class="newsListDivItemDivTitle">
						{{item.title}}
					</view>
					<view class="newsListDivItemDivTime">
						{{item.createTime}}
					</view>
					<view class="newsListDivItemDivAuthor">
						{{item.author}}
					</view>
				</view>
			</view>
			<view class="load-more" v-if="showLoading">
				<text>滑动到底部加载更多</text>
			</view>
			<view class="load-more" v-if="showNoMore">
				<text>没有更多数据了</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		newsList
	} from '@/api/home.js'
	export default {
		data() {
			return {
				title: '',
				newsType: '全部',
				newsList: [],
				newsTabsList: [{
						name: '全部'
					}, {
						name: '新闻'
					},
					{
						name: '公告'
					}, {
						name: '热点'
					},
					{
						name: '活动'
					},
					{
						name: '其他'
					}
				],
				pageNum: 1, // 当前页码
				pageSize: 10, // 每页条数
				total: 0, // 总数据量
				isLoading: false, // 是否正在加载
				showLoading: false, // 显示加载中
				showNoMore: false, // 显示没有更多
			};
		},
		// 页面滚动到底部
		onReachBottom() {
			// 页面滚动到底部时触发
			if (this.newsList.length < this.total) {
				this.pageSize += 10;
				this.getNewsList();
			} else if (this.newsList.length >= this.total) {
				this.showNoMore = true;
				this.showLoading = false;
			}
		},
		onLoad() {
			this.getNewsList()
		},
		methods: {
			// 跳转到详情页
			goDetails(item) {
				uni.navigateTo({
					url: `/pages/newsDetails/newsDetails?id=${item.id}`
				})
			},
			// 新闻标题点击
			newsTabsClick(item) {
				this.newsType = item.name
				this.pageSize = 10
				if (item.name == '全部') {
					this.newsType = ''
				}
				this.getNewsList()
			},
			// 获取新闻列表
			async getNewsList() {
				// 显示加载状态
				this.isLoading = true;
				this.showLoading = true;
				this.showNoMore = false;
				let par = {
					title: this.title,
					type: this.newsType,
					pageNum: this.pageNum,
					pageSize: this.pageSize
				}
				if (this.newsType == '全部') {
					par.type = ''
				}
				let res = await newsList(par)
				if (res.code == 200) {
					const newData = res.data.records;
					this.total = res.data.total;
					// 合并数据
					if (this.pageNum == 1) {
						this.newsList = newData;
					} else {
						this.newsList = this.newsList.concat(newData);
					}
					// 控制显示状态
					if (this.newsList.length >= this.total) {
						this.showNoMore = true;
						this.showLoading = false;
					} else {
						this.showNoMore = false;
						this.showLoading = true;
					}
				} else {
					this.isLoading = false;
					this.showLoading = false;
				}
			},
			// 搜索
			searchNews() {
				this.getNewsList()
				this.pageSize = 10
			}
		}
	}
</script>

<style lang="scss">
	.newsList {
		position: relative;

		.newsListDiv {
			margin-top: 200rpx;
			padding: 0 30rpx;

			.newsListDivItem {
				width: 100%;
				display: flex;
				margin-bottom: 20rpx;

				.newsListDivItemDiv {
					width: 67%;

					.newsListDivItemDivAuthor {
						font-size: 28rpx;
						color: #666;
					}

					.newsListDivItemDivTime {
						font-size: 28rpx;
						color: #666;
						margin: 10rpx 0;
					}

					.newsListDivItemDivTitle {
						font-size: 40rpx;
					}
				}

				.newsListDivItemImg {
					min-height: 150rpx;
					position: relative;
					margin-right: 20rpx;

					.newsListDivItemType {
						padding: 5rpx 10rpx;
						position: absolute;
						top: 0;
						right: 0;
						font-size: 20rpx;
						background-color: #ffffff;
						border-radius: 0 15rpx 0 20rpx;
						color: #f56c6c;
					}

					img {
						width: 200rpx;
						height: 100%;
						border-radius: 20rpx;
					}
				}
			}


			.load-more {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #666;
			}

			/* 加载动画 */
			.loading-spinner {
				width: 30rpx;
				height: 30rpx;
				border: 3rpx solid #ccc;
				border-top-color: #333;
				border-radius: 50%;
				animation: spin 1s linear infinite;
				margin-right: 16rpx;
			}

			@keyframes spin {
				to {
					transform: rotate(360deg);
				}
			}
		}

		.newsListSearch {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 10rpx 30rpx 20rpx;
			background-color: #ffffff;
			z-index: 999;
		}

	}
</style>